import './components-platform.less';
import Work1 from '@/assets/images/work_1.png'
import addIcon from '@/assets/images/co_2.png'
import Co3 from '@/assets/images/co_3.png'
import Co4 from '@/assets/images/co_4.png';
import co_5_1 from '@/assets/images/co_5_1.png';
import co_5_2 from '@/assets/images/co_5_2.png';
import co_6_1 from '@/assets/images/co_6_1.png';
import co_6_2 from '@/assets/images/co_6_2.png';
import co_6_3 from '@/assets/images/co_6_3.png';
import co_6_4 from '@/assets/images/co_6_4.png';
import co_6_5 from '@/assets/images/co_6_5.png';
import co_7_1 from '@/assets/images/co_7_1.png';
import co_7_2 from '@/assets/images/co_7_2.png';
import co_7_3 from '@/assets/images/co_7_3.png';
import collection_menu from '@/assets/images/collection_menu.png';
import co_8_2 from '@/assets/images/co_8_2.png';
import co_8_3 from '@/assets/images/co_8_3.png';
import co_9_1 from '@/assets/images/co_9_1.png';
import co_9_2 from '@/assets/images/co_9_2.png';
import co_9_3 from '@/assets/images/co_9_3.png';

import { Carousel } from 'antd';
import { useEffect, useState } from 'react';
const PlatformCom:React.FC<React.HTMLProps<Element>>  = () => {
    const [leftArr, setleftArr] = useState([]); // 左侧菜单数组
    const [leftIndex, setleftIndex]:any = useState(0); // 左侧当前点击索引
    const [rightArr, setrightArr] = useState([]); // 左侧菜单数组
    const rightJson:any = {
        '世界时钟':[
            {img:co_5_1},
            {img:co_5_2},
        ],
        '时钟':[
            {img:co_6_1},
            {img:co_6_2},
            {img:co_6_3},
            {img:co_6_4},
            {img:co_6_5},
        ],
        '待办':[
            {img:co_7_1},
            {img:co_7_2},
            {img:co_7_3},
        ],
        '我的收藏':[
            {img:collection_menu},
            {img:co_8_2},
            {img:co_8_3},
        ],
        '我的工作':[
            {img:co_9_1},
            {img:co_9_2},
            {img:co_9_3},
        ],
    } // 组件对应图片
    //左侧菜单点击事件
    const leftMenuClick = (_item:any,index:any) => {
        setleftIndex(index);
        getRightMenu(_item);
    }

    // 右侧菜单点击添加
    const addHomeMenu= (item:any) => {
        console.log(item);
    }
    // 获取左侧菜单调接口 - 右侧渲染rightJson[菜单名称(leftArr-text)]
    const getLeftMenu = () => {
        const fakeData:any = [{text:'全部'},{text:'今日推荐'},{text:'最近更新'},{text:'最受欢迎'},{text:'业务组件'},{text:'可视图表'}];
        for (const item of fakeData){
            item['isAct'] = false;
        }
        fakeData[0]['isAct'] =  true;
        setleftArr(fakeData);
        getRightMenu(fakeData[0]); // 初始化右侧菜单
        return;
        // 获取左侧菜单
    }
    // 获取右侧菜单调接口
    const getRightMenu = (_item:any) => {
        const fakeData:any = [{text:'世界时钟'},{text:'时钟'},{text:'待办'},{text:'我的收藏'},{text:'我的工作'}];
        setrightArr(fakeData);
        return;
        // 获取右侧菜单
    }
    // 初始化渲染左侧菜单
    useEffect(() => {
        getLeftMenu();
    }, []);
    return (
        <div className="platfomr_content">
          
            <div className="platfomr_content_left">
                {
                    leftArr.map((item:any,index) => {
                        return <div className={leftIndex === index ? 'platfomr_content_left_ac' : ''} key={index} onClick={() => {leftMenuClick(item,index)}}>全部</div>
                    })
                }
            </div>
            <div className="platfomr_content_right">
                <div className="platfomr_content_right_top">
                    <div className="platfomr_content_right_top_sea">
                        <input type="text" placeholder='请输入关键词'/>
                        <span></span>
                        <img src={Work1}alt="" />
                    </div>
                </div>
                <div className="platfomr_content_right_bottom">
                    {
                        rightArr.map((item:any,index) => {
                            return <div className="platfomr_content_right_bottom_list" key={index}>
                                        <div className="platfomr_content_right_bottom_list_tit">
                                            <h4>{item.text}</h4>
                                            <img src={addIcon} alt="" onClick={() => {addHomeMenu(item)}}/>
                                        </div>
                                        <div className="platfomr_content_right_bottom_list_con_last">
                                            <Carousel key={index} arrows nextArrow={<img src={Co3} alt="" className="platfomr_content_right_bottom_list_con_last_right"/>} prevArrow={<img src={Co4} alt="" className="platfomr_content_right_bottom_list_con_last_left"/>}>
                                            {
                                                rightJson[item.text].map((item:any,index:any) => {
                                                    return <div className="platfomr_content_right_bottom_list_con" key={index}>
                                                        <img src={item.img} alt="" className="platfomr_content_right_bottom_list_con_img"/>
                                                    </div>
                                                })
                                            }
                                            </Carousel>
                                        </div>
                                    </div>
                        })
                    }
                    
                    
                </div>
            </div>
        </div>
    )
}
export default PlatformCom 